<%@page import="com.dfhc.ISystemConstant"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/GX_css/info-reg.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/GX_css/base.css" />
<link  type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/css/GX_css/jquery-ui.css">
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/GX_css/info-mgt.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/GX_css/WdatePicker.css" />

<title>办公自动化系统</title>
<style type="text/css">
    .richeng_dialog{ width:510px; height:550px; background:#FFFFFF; position: fixed; top:20%; border-radius:4px;  border:1px solid #C5C5C5;}
    .richeng_dialog_title{ width:98%; height:40px; background:#E9E9E9; padding-left:10px;  border-radius:4px; margin-bottom:5px; line-height: 40px;}
    .richeng_dialog_title div:nth-child(1){width:50%; height:100%; float: left;}
    .richeng_dialog_title div:nth-child(2){width:48%; height:100%; float: right; text-align: right; margin-right: 2%;}
    .richeng_dialog ul{display: block; float: left; width:100%; height:auto; height:40px;}
    .richeng_dialog ul:hover li{background:#E5E5E5;}
    .richeng_dialog ul li{float: left;   height:30px; line-height: 30px; font-size: 13px; color: #666666;}
    .richeng_dialog ul li:nth-child(1){width:10%;}
    .richeng_dialog ul li:nth-child(2){width:20%;}
    .richeng_dialog ul li:nth-child(3){width:70%;}
     .contentList{width:100%; margin:0 auto;}
      .contentList table{width:100%; border:1px solid #c1d3de; border-collapse: collapse;}
      .contentList table tr{width:100%; height:40px; }
      .contentList table tr td{text-align: center; border:1px solid #c1d3de;  border-collapse: collapse;}
      .contentList table tbody tr:nth-child(even){background:#EDF6FB;}
      .contentList table thead tr {background:#EDF6FB; height:45px; font-weight: 600;}
</style>
</head>

<body>
<div class="query" id="query">
<%-- 	<form id="form" name="form" action="<%=request.getContextPath()%>/workprocess/workShow.action?titleType=myWork "method="post"> --%>
	<input name="startSign" id="startSign" type="hidden" value="${startSign}"/>
    <div class="query-conditions ue-clear">
        <div class="conditions staff ue-clear">
            <label>流程名称：</label>
            <input type="text" id="pname" value="${procName }" name="procName" placeholder="可以直接输入" />
        </div>
        <div class="conditions operate-time ue-clear">
            <label>发起时间：</label>
            <div class="select-wrap">
                <div class="select-title ue-clear" id="startTimeSign"><span>大于或等于</span><i class="icon"></i></div>
                <ul class="select-list">
                    <li>小于</li>
                    <li>大于</li>
                    <li>小于或等于</li>
                </ul>
            </div>
            <div class="input-box ue-clear">
                <input name="workdays" id="workdays"  type="text" value="${workdays}"/>
                <span>工作日</span>
            </div>
        </div>
        <input name="pid" id="pid" type="hidden" />
    </div>
    <div class="query-btn ue-clear">
        <a href="javascript:;" onclick="javascript:query();" class="confirm">查询</a>
        <a href="javascript:;" onclick="javascript:empty();" class="clear">清空条件</a> 
    </div>
<!--     </form> -->
</div>
<div class="table-operate ue-clear">

    <a href="javascript:;" class="edit">过滤</a>
</div>
<div class="table-box">
    <table>
        <thead>
        	<tr>
	            <th class="num">序号</th>
	            <th class="process">流程</th>
	            <th class="node">重要程度</th>
	             <th class="node">发起时间</th>
	            <th class="operate">操作</th>
            </tr>
        </thead>
        <tbody>
        	<c:forEach items="${taskVos }" var="taskVo" varStatus="rowCounter" begin="0" step="1">
	        	<tr>
	            	<td class="num">${rowCounter.index+1 }</td>
	                <td class="process">${taskVo.procTitle}</td>
	                <td class="node">   
	                	<c:forEach items="${levels}" var="vo">
	                		<c:set var="ranking" scope="session" value="${taskVo.ranking}"/>
	                		<c:if test="${taskVo.ranking eq vo.key}">${vo.value}</c:if>
	                	</c:forEach>
	                </td>
	                 <td class="node"> 
	                	 ${taskVo.startTime}  
	                </td>
                	<td class="operate">
	                    <a href="javascript:;" onclick="javascript:look('${taskVo.procDefId }','${taskVo.procInstId }','${taskVo.id }','${taskVo.startUserName }','${taskVo.procTitle }','${taskVo.startTime }','${ranking}');" class="img"><span class="confirm">查看</span></a>
	                </td>
            	</tr>
            </c:forEach>
        </tbody>
    </table>
</div>
<div class="pagination ue-clear"></div>
<div id="showDetail" style="display:none;">
<div id="processDetail" class="title"><h2>工作流程基本信息</h2></div>
<div class="main">
	<p class="short-input ue-clear newstyle">
    	<label>工作流名称：</label><span id="processName">uimaker</span>
    </p>
    <p class="short-input ue-clear newstyle">
    	<label>发起人：</label><span id="startName">UI制造者</span>
    </p>
    <p class="short-input ue-clear newstyle">
        <label>发起日期：</label><span id="startTime">2014-08-27 16:49:20</span>
    </p>
    
      <div class="contentList">
      <table>
      	<thead>
	        <tr>
	          <td>节点名称</td>
	          <td>人员姓名</td>
	          <td>处理状态</td>
	          <td>处理意见</td>
	          <td>处理时间</td>
	        </tr>
          </thead>
          <tbody id="workPlan">
          </tbody>
       
      </table>
  </div>
    
   <!--  <p class="long-input ue-clear newstyle">
    	<label>状态：</label><span id="processState">正常结束</span>
    </p>
    <div id="dynamicDiv">
    	</div>
    <p class="short-input ue-clear newstyle" id="attaId">
    	<label>附件名称：</label><span id="fileNameList">China，wordl，PDF</span>
    </p> -->
    

</div>
<div class="btn1 ue-clear">
    <a href="#processImg" class="clear">流程图</a>
</div>
${ContentListVos}
<div id="processImg" class="main">
	<img id="detailPicId" src="<%=request.getContextPath()%>/images/oa/liuchengtu01.png" />
</div>
</div>

<div class="richeng_dialog" style="display:none;">
    <form action="##" name="userMessageForm">
    	<ul>
            <li>选择</li>
            <li>序号</li>
            <li>名称</li>
        </ul>
    	<c:forEach items="${userVos }" var="userVo" varStatus="rowCounter" begin="0" step="1">
        <ul>
            <li><input type="checkbox" id="checkUser" name="checkUser" value="${userVo.id }"></li>
            <li>${rowCounter.index+1 }</li>
            <li>${userVo.name }</li>
        </ul>
        </c:forEach>
    </form>
</div>

</body>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/GX_js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/GX_js/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/GX_js/common.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/GX_js/info-mgt.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/GX_js/WdatePicker.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/GX_js/jquery.pagination.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/rm-tools.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/myalert.js"></script>

<script type="text/javascript">
	 function look(procDefId, procInstId, id, userName, procDefName, startTime,ranking){
	//alert("查看详情!");
		$('#processName').html(procDefName);
		$('#processNameT').html(procDefName);
		$('#startName').html(userName);
		if(!isStrEmpty(startTime)){
			startTime = startTime.substring(0,startTime.lastIndexOf('.'));
		}
		$('#startTime').html(startTime);
		$('#processStateT').html(ranking);
		
		//流程进度表
		$.ajax({
    	    type:'post',//可选get
    	    url:'<%=request.getContextPath()%>/workprocess/getWorkPlan?date='+new Date(),
    	    data:{'proInstId':procInstId,'proDefId':procDefId},
    	    dataType:'json',
    	    async:false , //false为同步
    	    success:function(data,status){
    		   if(data.status=="0"){
    		  		zfalert("警告",data.message,"");
    	   	   }else{
    	   		   	 var list = data.list;
    	   			 var html="";
	    	   		 $.each(list,function(n,plan) {  
	    	   			 html += "<tr><td>"+plan.nodeName+"</td><td>"+plan.userName+"</td><td>"+plan.status+"</td><td>"+plan.opinion+"</td><td>"+plan.endTime+"</td></tr>";
	    	   		 });
	    	   		 $("#workPlan").html(html);
    	   	   }   
    	   },
    	   error:function(xhr,s1,s2){
    	    	var message = xhr.responseText;
    			eval("var json = "+message);
    			if($.trim(json.error).length==0){
    				//zfalert("警告","数据异常,请刷新页面重试!","");
    			}else{
    				zfalert("警告",json.error,"");
    			}
    	   }
    	});
		
		//查询当前节点有哪些动态表单
		var srcurl = "<%=request.getContextPath()%>/model/read-resource?pdid="+procDefId+"&resourceName=";
		$("#detailPicId").attr("src",srcurl);
		$('#showDetail').show();
		window.location.href="#processDetail";
	}
	
	function query(){
		var procName= $("#query").find("input[name=procName]").val();
		var startTimeSign = $('#startTimeSign span').text();
		if($("#workdays").val()!=""){
			$("#startSign").val(startTimeSign);
		}
		procName=encodeURI(encodeURI(decodeURIComponent(procName,true)));
  	    window.location.href='<%=request.getContextPath()%>/workprocess/workShow.action?titleType=myWork&procName='+procName+'&startSign='+$("#startSign").val()+'&workdays='+$("#workdays").val(); 
/* 		form.submit(); */
	}
	
	//清空查询条件
	function empty(){
		$('#pname').val('');
		$('#pid').val('');
		$('#workdays').val('');
		$('#procDefName span').text('请选择');
		$('#startTimeSign span').text('大于或等于');
	}
	
	$('.richeng_dialog').dialog({
		autoOpen:false,
		title:'选择人员',
		modal:true,
		resizable:false,
		width:500,
		height:500,
		buttons:{	
			'提交':function(){
				var ckvId =''; 
	    		var ckvName = '';
				$('.richeng_dialog').find('input[id="checkUser"]:checked').each(function(){ 
	    			if(ckvId==''){
	    				ckvId = $(this).val();
	    				ckvName = $(this).parent().parent().children().last()[0].innerText;
	    			}else{
	    				ckvId += ','+$(this).val();
	    				ckvName += ','+$(this).parent().parent().children().last()[0].innerText;
	    			}
	    		});
				$('#pname').val(ckvName);
				$('#pid').val(ckvId);
				$('.richeng_dialog').dialog('close');
			},
		}
	});
	//显示人员选择层
	function chooseStartPerson(){
		$('.richeng_dialog').dialog('open');
	}
	
    $(".select-title").on("click",function(){
        $(".select-list").hide();
        $(this).siblings($(".select-list")).show();
        return false;
    })
    $(".select-list").on("click","li",function(){
        var txt = $(this).text();
        $(this).parent($(".select-list")).siblings($(".select-title")).find("span").text(txt);
    })
	var procName2= $("#query").find("input[name=procName]").val();
    $('.pagination').pagination('${recordNum}',{
        callback: function(page){
        	window.location.href="<%=request.getContextPath()%>/workprocess/workShow.action?titleType=myWork&page="+(page+1)+"&procName="+procName2+'&startSign='+$("#startSign").val()+'&workdays='+$("#workdays").val()+"&date="+new Date();
        },
        display_msg: true,
        setPageNo: true,
    	current_page:${currentPage-1}
    });

    $("tbody").find("tr:odd").css("backgroundColor","#eff6fa");

    showRemind('input[type=text], textarea','placeholder');
</script>

